<template>
	<view >
		<view class="notes">
			<p><span>*</span>设备详细信息(Device Details)</p>
		</view>
		<view class="uni-common-mt">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">序列号：</view>
					<view class="englishInfo">Serial Number</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.serialnumber}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">设备类型：</view>
					<view class="englishInfo">DeviceType</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.devicetype}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">设备型号：</view>
					<view class="englishInfo">DeviceModel</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.devicemodel}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">出厂时间：</view>
					<view class="englishInfo">DeliveryTime</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.deliverytime}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">客户名称：</view>
					<view class="englishInfo">CustomerName</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.customername}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">绑定人：</view>
					<view class="englishInfo">Binder</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.binder}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">客户电话：</view>
					<view class="englishInfo">CustomerPhone</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.customerphone}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">职位：</view>
					<view class="englishInfo">Position</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.position}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">审批状态：</view>
					<view class="englishInfo">Status</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.status}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff "></u-gap>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="3">
					<view class="title">申请时间：</view>
					<view class="englishInfo">RequestTime</view>
				</u-col>
				<u-col span="8">
					<text class="info">{{information.requestTime}}</text>
				</u-col>
			</u-row>
			<u-gap height="3px" bgColor="#ffffff " v-if="show"></u-gap>
			<view  v-if="show">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="3">
						<view class="title">驳回理由：</view>
						<view class="englishInfo">Reason</view>
					</u-col>
					<u-col span="8">
						<text class="info">{{information.reason}}</text>
					</u-col>
				</u-row>
				
				<!-- <view class="title">驳回理由：</view>
				<view class="input">
					<text class="info">{{information.reason}}</text>
				</view> -->
			</view>
			
		</view>
		
		<u-gap height="40px" ></u-gap>
	</view>
</template>

<script>
	let msg;
	export default {
		data() {
			return {
				show: false,
				information: {
					serialnumber: '',  // 序列号
					devicetype: '',  // 设备类型 
					devicemodel: '',  //设备型号
					deliverytime: '',  //出厂时间
					customername: '',  // 客户名称
					binder: '',       // 绑定人
					customerphone: '',  // 客户电话
					position: '',      //职位 
					status: '',        //审批 状态
					requestTime: '',	// 申请日期 
					reason: '',			// 驳回理由
				},
			};
		},
		onLoad(option) {
			msg = JSON.parse(decodeURIComponent(option.data))
			uni.request({
				url: 'https://www.smacaftersales.com:443/bindRequest/bindRequest/findBindQuestInfoByBindrequestid',
				method: 'GET',
				data:{ bindrequestid: msg.bindrequestid},
				success: (res) => {
					console.log(res,"---------")
					this.information.serialnumber = res.data.data[0].serialnumber
					this.information.devicetype = res.data.data[0].devicetype
					this.information.devicemodel = res.data.data[0].devicemodel
					this.information.deliverytime = res.data.data[0].deliverytime
					this.information.customername = res.data.data[0].customername
					this.information.binder = res.data.data[0].binder
					this.information.customerphone = res.data.data[0].customerphone
					this.information.position = res.data.data[0].position
					this.information.status = res.data.data[0].status
					this.information.requestTime = res.data.data[0].requestTime
					this.information.reason = res.data.data[0].reason
					if(this.information.reason != null && this.information.reason !=''){
						this.show = true
					}	
				}
			})
		},
		onShow() {},
		methods: {
		}
	}
</script>
<style>
	/* 页面背景 */
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss">
	.englishInfo{
		color: #74daff;
		align-items: center;//子控件垂直居中
		justify-content: center;//子控件水平居中
	}
	.info{
		font-size: 17px;
		color: #ababab;
	}
	.user-input{
		width: 390px;
		margin: 8px 10px;
		display: flex;
		.input{
			width: 260px;
			margin-left: 10px;
		}
	}
	.fenjie{
		width: 390px;
		height: 1px;
		background: #ddd;
		margin: 0 auto;
	}

	.up-button{
		width: 160px;
		height:40px;
		background: #488ac7;
		border-radius: 4px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-top: 30px;
	}

	.notes{
		width: 335px;
		margin: 20px auto 40px;
		font-size: 14px;
		font-weight: bold;
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}
	}
	.title{
		// width: 50px;
		height: 20px;
		font-size: 16px;
		font-weight: bold;
		display: flex; 
		justify-content: center;
	}
</style>
